<template>
  <div class="recommendPage" @mouseenter="on_mouseenter" @mouseleave="on_mouseleave">
    <div slot="pagination" class="swiper-pagination item-swiper-pagination" />
    <swiper ref="mySwiper" :options="swiperOption">
      <swiper-slide v-for="(item, index) in list.items" :key="index" @mouseenter="stop" @mouseleave="start">
        <div class="item_link">
          <div class="item_img">
            <img class="swiper_slide_img" :src="item.logo" alt="item_pic">
          </div>
          <div class="item_info">
            <p class="item_title">
              {{ item.title }}
            </p>
            <p class="item_space" />
            <p class="item_mark">
              优势项目
            </p>
            <p class="item_go">
              <nuxt-link :to="`/item/${item._id}`">
                去看看
              </nuxt-link>
            </p>
          </div>
        </div>
      </swiper-slide>

      <div slot="button-prev" class="swiper-button-prev item-swiper-button-prev" />
      <div slot="button-next" class="swiper-button-next item-swiper-button-next" />
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  components: {
    swiper,
    swiperSlide
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 4,
        // spaceBetween: 20,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // autoplay: false,
        // 显示分页
        pagination: {
          el: '.swiper-pagination.item-swiper-pagination',
          // bulletClass: 'my-bullet',
          clickable: true // 允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          prevEl: '.swiper-button-prev.item-swiper-button-prev',
          nextEl: '.swiper-button-next.item-swiper-button-next'
        }
      }
    }
  },
  computed: {
    itemSwiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    // eslint-disable-next-line no-console
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false);
  },
  methods: {
    // 通过获得的swiper对象来暂停自动播放
    on_mouseenter () {
      this.itemSwiper.autoplay.stop()
    },
    on_mouseleave () {
      this.itemSwiper.autoplay.start()
    }
  }
}
</script>
<style lang="scss" scoped>
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.recommendPage .swiper-container .swiper-slide{
  background: #fff;
}
.my-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

.swiper_slide_img{
  height: 100%;
  width: 100%;
}

.swiper-pagination{
  height: 16px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  top: -30px;
  z-index: 1;
}
.item_link{
  display: flex;
  align-items: center;
  justify-content: center;
  //border-bottom: 1px solid #ff7a10;
  width: 295px;
  height: 109px;
  background: #fff;
  overflow: hidden;
  margin-right: 7px;
  box-sizing: border-box;
  .item_info{
    width: 130px;
    overflow: hidden;
    margin-left: 20px;
    margin-right: 15px;
    .item_title{
      color: #ff6609;
      font-size: 12px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
    }
    .item_space{
      width: 30px;
      height: 0;
      border-bottom: 1px solid #CECECE;
      margin-top: 5px;
    }
    .item_mark{
      color: #666666;
      font-size: 12px;
      height: 16px;
      line-height: 16px;
      overflow: hidden;
      margin-top: 7px;
    }
    .item_go{
      color: #ff6609;
      font-size: 12px;
      width: 63px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border: 1px solid #ff6609;
      border-radius: 10px;
      margin-top: 10px;
    }
  }
  .item_img{
    height: 109px;
    width: 140px;
    transition: all 0.5s;
    position: relative;
    top: 0px;
  }
  &:hover{
    .item_img{
      top: -5px;
    }
  }
}
.swiper-slide{
  box-sizing: border-box;
}
.swiper-wrapper .swiper-slide:nth-child(4n) {
  .item_link{
    border: 1px solid #ff7a10;
    .item_info{
      .item_title {
        color: #ff7a10;
      }
      .item_go {
        a{
          color: #ff7a10;
        }
        border: 1px solid #ff7a10;
      }
    }
  }
}
.swiper-wrapper .swiper-slide:nth-child(4n+1){
  .item_link{
    border: 1px solid #21b7b8;
    .item_info{
      .item_title {
        color: #21b7b8;
      }
      .item_go {
        a{
          color: #21b7b8;
        }
        border: 1px solid #21b7b8;
      }
    }
  }
}
.swiper-wrapper .swiper-slide:nth-child(4n+2){
  .item_link{
    border: 1px solid #ae45e7;
    .item_info{
      .item_title {
        color: #ae45e7;
      }
      .item_go {
        a{
          color: #ae45e7;
        }
        border: 1px solid #ae45e7;
      }
    }
  }
}
.swiper-wrapper .swiper-slide:nth-child(4n+3){
  .item_link{
    border: 1px solid #41a0fd;
    .item_info{
      .item_title {
        color: #41a0fd;
      }
      .item_go {
        a{
          color: #41a0fd;
        }
        border: 1px solid #41a0fd;
      }
    }
  }
}
</style>
